<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>04CSS단위박스테두리</title>
		<style type="text/css">
			#no1{font-size:2em;}
			#no2{font-size:1.5em;}
			#no3{font-size:1.125em;}
			#no4{font-size:1em;}
			
			#c01{color:red}
			#c02{color:green}
			#c03{color:blue}
			#c04{color:#ff0000}
			#c05{color:#008000}
			#c06{color:#0000ff}
			#c07{color:rgb(255,0,0)}
			#c08{color:rgb(0,125,0)}
			#c09{color:rgb(0,0,255)}
			#c10,#c11,#c12{width: 250px; height: 150px;}
			#c10{background-color:rgba(255,0,0,1)}
			#c11{background-color:rgba(255,0,0,0.5)}
			#c12{background-color:rgba(255,0,0,0.1)}
			
			#jinsu{width:300px; height:400px; background-image:url("images/jinsu.jpg")}
			/*#b01,#b02,#b03,#b04,#b05{*/
			.boxclass{width:250px; height: 150px;}
			#b01{background:yellow; margin:10px; padding:10px; border:3px solid red;}
			/*상하좌우*/
			#b02{background:rgba(255,0,0,0.5); margin:20px 12px; padding:10px 15px; border:3px solid blue;}
			/*상/하,좌/우*/
			#b03{background:orange; margin:5px 10px 15px 20px; padding:5px 10px 15px 20px; border:3px solid navy;}
			/*상좌하우*/
			#b04{background:navy; border:3px dashed red;}
			#b05{border:5px double red;}
			#b06{border:thick dotted blue;border-radius:15px;}
			#b07{border:thin groove orange;border-radius:15px 20px 25px 30px;}
		</style>
	</head>

	<body>
		<h1>CSS단위박스테두리</h1>
		<h2>CSS단위</h2>
		<p id="no1">H1태그 기본 크기는 32px, 200% ,2em</p>
		<p id="no2">H2태그 기본 크기는 24px, 150% ,1.5em</p>
		<p id="no3">H3태그 기본 크기는 18px, 133% ,1.125em</p>
		<p id="no4">body태그 기본 크기는 16px, 100% ,1em</p>
		
		<hr/>
		<h2>선택자 우선순위</h2>
		<p>!important(속성값 뒤에 추가) </p>
		<p>인라인 스타일(style태그로 적용)</p>
		<p>id 선택자(#이름으로 적용)</p>
		<p>class 선택자('.이름'으로 적용)</p>
		<p>가상 class 선택자(':이름'으로 적용)</p>
		<p>타입 선택자('요소이름'으로 적용)</p>
		
		<hr/>
		<h2>색상 단위</h2>
		<p>색상이름 color name:
			<span id="c01">red</span>,
			<span id="c02">green</span>,
			<span id="c03">blue</span></p>
		<p>16진수 코그hex code
			<span id="c04">red</span>,
			<span id="c05">green</span>,
			<span id="c06">blue</span></p>
		<p>RGB 색상값
			<span id="c07">red</span>,
			<span id="c08">green</span>,
			<span id="c09">blue</span></p>
			
		<div id="c10">투명도 rgba()</div>
		<div id="c11">투명도 rgba()</div>
		<div id="c12">투명도 rgba()</div>
		
		<hr/>
		<h2>URL 단위</h2>
		<div id="jinsu">진수</div>
		
		<hr />
		<h2>CSS박스모델 특성</h2>
		<p id="b01" class="boxclass">모든 html요소들은 박스로 인식될 수 있음</p>
		<p id="b02" class="boxclass">html요소에 적용된 박스는 다음의 특성이 존재함 :안쪽/바깥쪽 여백, 테두리</p>
		<p id="b03" class="boxclass">박스의 크기는 width, height로 지정</p>
		<p id="b04" class="boxclass">박스의 여백은 margin, padding 으로 지정</p>
		<p id="b05" class="boxclass">박스의 테두리는 border로 지정</p>
		<p>CSS박스 모델로 컨텐츠를 배치하다 보면 margin병합현상이 발생됨<br/>
			두 박스를 수직으로 배치하는 경우 각 박스의 margin 중 가장 큰 값으로 적용</p>
		
		<hr/>
		<h2>CSS 테두리</h2>
		<p id="b06">테두리 두께,테두리 종류,테두리색깔</p>
		<p id="b07">CSS에 추가된 border-radius는 모서리를 둥글게 만들수 있게 해줌</p>
		
		<hr />
      <h2>박스 그림자 : box-shadow</h2>
      <p style="width: 300px; height: 100px; background: red; box-shadow: 5px 5px 5px orange;"> </p>
      
      <hr />
      <h2>그라디언트 : gradient</h2>
      <p style="width: 350px; height: 100px; background: linear-gradient(117deg, #000000 10% , #ffffff 90%); "> </p>
      <p style="width: 350px; height: 100px; background: linear-gradient(red, blue); "> </p>
      <p style="width: 350px; height: 100px; background: linear-gradient(to bottom right, orange, red); "> </p>
      <p style="width: 550px; height: 100px; background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); "> </p>
      <p style="width: 550px; height: 100px; background: radial-gradient(red, orange, yellow, green, blue, indigo, violet); "> </p>
		
		
		
		
	</body>
</html>
